<!--
 * @Description:
 * @version: 添加注释
 * @Author: 潘骏杰
 * @Date: 2022-04-1 14:22:37
 * @LastEditors: 潘骏杰
 * @LastEditTime: 2022-04-01 14:29:59

-->

<!--
 * @Description:
 * @version: 糖尿病随访业务组件
 * @Author: 陈捷
 * @Date: 2022-03-31 11:19:15
 * @LastEditors: 陈捷
 * @LastEditTime: 2022-04-01 14:19:58

-->
<template>
  <van-tab title="糖尿病随访">
    <div class="tab-ul">
      <van-row gutter="20">
        <van-col v-for="item in tangniaobingList" :key="item.type" span="12">
          <div class="li-back" @click="changepush(item)">
            <div class="li-left">
              <!-- 找png直接替换 -->
              <div class="listImg">
                <img :src="tupianList[item.type].image" alt="">

                <div
                  :class="{
                    waitFinshed: item.status === 'wait',
                    hasFinshed: item.status === 'finished'
                  }"
                >
                  {{ item.status === "finished" ? "已完成" : "待完成" }}
                </div>
              </div>
            </div>
            <div class="li-right" @click="Tofather(item)">
              <h3>
                {{ item.title }}<span>{{ item.time }}</span>
              </h3>
              <p class="van-ellipsis">
                <span>{{ item.name }}</span> ｜
                <span>{{ item.sex === 1 ? "男" : "女" }}</span> ｜
                <span>{{ item.address }}</span>
              </p>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
  </van-tab>
</template>

<script>
export default {
  name: 'TangNiaoBing',

  data() {
    return {
      // 签约组件数据
      tangniaobingList: [
        {
          type: '0',
          status: 'finished',
          title: '随访任务',
          time: '3天前',
          name: '李世民',
          sex: '1',
          address: '新吴区新安街道82hao202室'
        },
        {
          type: '1',
          status: 'finished',
          title: '新建随访',
          time: '3小时前',
          name: '西施',
          sex: '0',
          address: '梁溪区新安街道82hao202室'
        }

      ],
      tupianList: [
        { image: require('@/assets/images/icon/intention.png') },
        { image: require('@/assets/images/icon/intention.png') }

      ]
    }
  },
  methods: {
    Tofather(item) {
      this.$emit('getSon', item.name)
    },
    gopush(path) {
      this.$router.push({ path })
    },
    changepush(item) {
      this.$emit('changepush', item.type)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-tab--active {
  color: #4a90e2 !important;
}
/deep/ .van-tab {
  width: 96px;
  height: 33px;
  font-size: 14px;
  font-weight: 500;
  color: #4a4a4a;
}
.img img {
  width: 40px;
}

.ov-h {
  margin-bottom: 15px;
}
.listImg {
  position: relative;
}
.waitFinshed,
.hasFinshed {
  position: relative;
  top: -10px;
}
.listImg img {
  width: 50px;
}
</style>
